<template>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item label="用户账号" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>

    <el-form-item label="用户账号" prop="password">
      <el-input v-model="ruleForm.password" />
    </el-form-item>

    <el-form-item>
       <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
       <el-button @click="resetForm(ruleForm)">重置</el-button>
    </el-form-item>

  </el-form>
</template>

<script setup lang="js">
  import { ref, reactive, toRefs } from 'vue'

  const ruleFormRef = ref(null)
  const formSize = ref('default')
  const ruleForm = reactive({
    username: '',
    password: ''
  })
  const rules = reactive({
    username: [
      { required: true, message: '请输入用户账号', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入用户密码', trigger: 'blur' }
    ]
  })

  const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!')
        return false
      }
    })
  }

  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }

</script>

<style scoped>

</style>